<template>
  <div id="archive">
    <el-row id="" type="flex" justify="space-around">
      <el-col :span="22" :xs="{ span: 22, offset: 2 }">
        <el-timeline v-loading="loading" element-loading-text="加载中...">
          <el-timeline-item
            v-for="(archive, index) in archives"
            :key="index"
            :color="archive.color"
            :timestamp="archive.date"
            placement="top"
            icon="el-icon-more"
            type="primary"
            size="large"
          >
            <div class="line-item">
              <el-card class="box-card">
                <ul class="text item">
                  <li
                    class="topic-item"
                    v-for="(article, index) in archive.articles"
                    v-bind:key="index"
                  >
                    <el-button
                      type="text"
                      class="mr-10"
                      style="font-size: 10px; color: gray"
                      >{{ article.createTime }}</el-button
                    >
                    <router-link
                      :to="{ name: 'article', query: { id: article.atcId } }"
                      style="font-size: 18px; color: grey; border-bottom: none"
                    >
                      <el-button
                        type="text"
                        style="color: black; font-size: 16px; font-weight: blod"
                        >{{ article.title }}</el-button
                      >
                    </router-link>
                  </li>
                </ul>
              </el-card>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { archive } from "@/api/apis";
import "element-ui/lib/theme-chalk/display.css";
export default {
  name: "archive",
  data() {
    return {
      archives: [],
      loading: true,
    };
  },
  mounted() {
    this.loadArchive();
  },
  methods: {
    loadArchive() {
      this.loading = true;
      archive().then((res) => {
        this.archives = res.data;
        this.loading = false;
      });
    },
  },
};
</script>

<style>
#archive ul {
  list-style: none !important;
  margin: 0px;
  padding: 0px !important;
}
.line-item {
  display: inline-block;
  width: 100%;
}

.line-item:hover {
  cursor: pointer;
  color: #409eff;
}

.count {
  margin-bottom: 20px;
  font-size: 20px;
  color: #e6a23c;
}

.topic-item {
  width: 100%;
  margin: 5px;
  padding-bottom: 5px;
  /* border-bottom: solid 1px rgb(223, 219, 219); */
}

.item {
  float: left;
}

.el-timeline-item__timestamp,
.is-top {
  color: cadetblue !important;
  font-size: 14px !important;
  font-weight: bold !important;
  /* line-height: 50px !important; */
  color: rgb(64, 158, 255) !important;
}
</style>